<script setup  name="comMenuBar">
import { ref,onMounted,watch } from 'vue';
import { useRouter,useRoute } from 'vue-router';

const router = useRouter();//路由实例
const route = useRoute(); // 添加路由对象
const menuList = ref([]);//菜单列表元素
const activeIndex = ref(0);//记录被点击的菜单的index
const { menuData } = defineProps({
    menuData: {
        type: Array,
/*         default: () => ([
            {
                icon: 'icon-jichugongzuo',
                text: '基础工作',
                router: '/administrator'
            },
            {
                icon: 'icon-likefill',
                text: '突出工作',
                router: '/administrator/outstandingWork'
            },
            {
                icon: 'icon-job-',
                text: '分数总览',
                router: '/administrator/scoreOverview'
            },
            {
                icon: 'icon-geren',
                text: '个人中心',
                router: '/administrator/user'
            }
        ]) */
    },
})
// 根据当前路由设置激活菜单
const setActiveMenu = () => {
    const currentPath = route.path;
    
    // 查找匹配当前路由的菜单项
    const index = menuData.findIndex(item => 
        currentPath.startsWith(item.router)
    );
    
    if (index !== -1) {
        activeIndex.value = index;
        // 更新UI激活状态
        updateMenuHighlight(index);
    }
};
// 更新菜单高亮
const updateMenuHighlight = (index) => {
    const menuItems = menuList.value.children;
    for (let i = 0; i < menuItems.length; i++) {
        menuItems[i].classList.toggle('activeMenu', i === index);
    }
};
// 菜单点击处理
const menuClick = (index) => {
    if (index === activeIndex.value) return;
    
    activeIndex.value = index;
    updateMenuHighlight(index);
    router.push(menuData[index].router);
};

// 初始化和监听路由变化
onMounted(() => {
    setActiveMenu();
});

watch(() => route.path, () => {
    setActiveMenu();
});
</script>

<template>
    <div class="comMenuBar">
        <div class="content">
            <!-- 占位元素 -->
            <div class="placeHolder"></div>
            <!-- 菜单内容元素 -->
            <div class="menuContent">
                <ul ref="menuList">
                    <li
                    v-for="(item,index) in menuData"
                    :key="index"
                    @click="menuClick(index)"
                    :class="index === 0 ? 'activeMenu' : ''"
                    >
                        <span class="iconfont" :class="item.icon"></span>
                        <span class="text">{{ item.text }}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">

.comMenuBar {
    width: 12vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #818bbd;
    font-size: 17px;
    font-weight: 500;
    color: white;
    .content{
        width: 100%;
        height: 100%;
        background-color: #b5bbd8;
        border-bottom-left-radius: 30px;
        .placeHolder {
            height: 10vh;
            width: 100%;
        }
        .menuContent {
            width: 100%;
            height: calc(100% - 10vh);
            ul{
                position: relative;
                width: 100%;
                height: 100%;
                li{
                    width: 100%;
                    height: 7vh;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: transparent;
                    transition: background-color 0.4s ease-in-out;
                    .text {
                        padding-left: 10px;
                        overflow: hidden;
                        white-space: nowrap;
                    }
                    &:hover {
                        background-color: #4c5fbc;
                    }
                }
                //激活状态的背景颜色
                .activeMenu {
                    background-color: #4c5fbc;
                }
            }
        }
    }
}
</style>